<ion-header>
    <ion-toolbar>
        <ion-title>
            <h1 id="core-course-section-selector-label">{{ 'core.course.courseindex' | translate }}</h1>
        </ion-title>
        <ion-buttons slot="end">
            <ion-button fill="clear" (click)="closeModal()" [ariaLabel]="'core.close' | translate">
                <ion-icon slot="icon-only" name="fas-xmark" aria-hidden="true" />
            </ion-button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="loaded" placeholderType="column" placeholderHeight="48px">
        @if (loaded) {
            <ion-list id="core-course-section-selector" role="listbox" aria-labelledby="core-course-section-selector-label">
                <ng-container *ngFor="let section of sectionsToRender">
                    @if (allSectionId === section.id) {
                        <ion-item class="divider core-course-index-all" (click)="selectSectionOrModule($event, section.id)" button
                            [class.item-current]="selectedId === section.id" [detail]="false">
                            <ion-label>
                                <h2>
                                    <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id" />
                                </h2>
                            </ion-label>
                        </ion-item>
                    } @else {
                        <ng-container *ngTemplateOutlet="sectionTemplate; context: {section}" />
                    }
                </ng-container>
            </ion-list>
        }
    </core-loading>
</ion-content>


<ng-template #sectionTemplate let-section="section">
    <div class="ion-activatable ripple-parent">
        <ion-item class="divider section" (click)="selectSectionOrModule($event, section.id)" tappable
            [class.item-current]="selectedId === section.id" [class.item-dimmed]="!section.visible"
            [class.item-hightlighted]="section.highlighted" [detail]="false">
            @if (section.hasVisibleModules) {
                <ion-icon name="fas-chevron-right" flip-rtl slot="start" class="expandable-status-icon"
                    (ariaButtonClick)="toggleExpand($event, section)"
                    [attr.aria-label]="(section.expanded ? 'core.collapse' : 'core.expand') | translate"
                    [attr.aria-expanded]="section.expanded" [attr.aria-controls]="'core-course-index-section-' + section.id"
                    [class.expandable-status-icon-expanded]="section.expanded" />
            } @else {
                <ion-icon name="" slot="start" aria-hidden="true" class="expandable-status-icon" />
            }
            <ion-label>
                <h2>
                    <span (ariaButtonClick)="selectSectionOrModule($event, section.id)">
                        <core-format-text [text]="section.name" contextLevel="course" [contextInstanceId]="course?.id" />
                    </span>
                </h2>
            </ion-label>
            @if (section.highlighted && highlighted) {
                <ion-badge slot="end">{{highlighted}}</ion-badge>
            }
            @if (section.availabilityinfo) {
                <ion-icon name="fas-lock" slot="end" class="restricted" [attr.aria-label]="'core.restricted' | translate" />
            }
            @if (!section.visible && !section.uservisible) {
                <ion-icon name="fas-eye-slash" slot="end" class="restricted" [attr.aria-label]="'core.notavailable' | translate" />
            }
            @if (!section.visible && section.uservisible) {
                <ion-icon name="fas-eye-slash" slot="end" class="restricted"
                    [attr.aria-label]="'core.course.hiddenfromstudents' | translate" />
            }
        </ion-item>
        <ion-ripple-effect />
    </div>
    <div id="core-course-index-section-{{section.id}}" class="core-course-index-section-content">
        @if (section.expanded) {

            <ng-container *ngFor="let modOrSubsection of section.contents">
                @if (!isModule(modOrSubsection)) {
                    <div class="core-course-index-subsection">
                        <ng-container *ngTemplateOutlet="sectionTemplate; context: {section: modOrSubsection}" />
                    </div>
                } @else {
                    <ion-item class="module" [class.item-dimmed]="!modOrSubsection.visible" [class.indented]="modOrSubsection.indented"
                        [class.item-hightlighted]="section.highlighted"
                        (click)="selectSectionOrModule($event, section.id, modOrSubsection.id)" button>
                        @if (modOrSubsection.completionStatus === undefined) {
                            <ion-icon class="completioninfo completion_none" name="" slot="start" aria-hidden="true" />
                        } @else if (modOrSubsection.completionStatus === 0) {
                            <ion-icon class="completioninfo completion_incomplete" name="far-circle" slot="start"
                                [attr.aria-label]="'core.course.todo' | translate" />
                        } @else if (modOrSubsection.completionStatus === 1 || modOrSubsection.completionStatus === 2) {
                            <ion-icon class="completioninfo completion_complete" name="fas-circle" color="success" slot="start"
                                [attr.aria-label]="'core.course.done' | translate" />
                        } @else if (modOrSubsection.completionStatus === 3) {
                            <ion-icon class="completioninfo completion_fail" name="fas-xmark" color="danger" slot="start"
                                [attr.aria-label]="'core.course.failed' | translate" />
                        }
                        <ion-label>
                            <p class="item-heading">
                                <core-format-text [text]="modOrSubsection.name" contextLevel="module"
                                    [contextInstanceId]="modOrSubsection.id" [courseId]="modOrSubsection.course" />
                            </p>
                        </ion-label>
                        @if (!modOrSubsection.uservisible) {
                            <ion-icon name="fas-lock" slot="end" class="restricted" [attr.aria-label]="'core.restricted' | translate" />
                        }
                    </ion-item>
                }
            </ng-container>

        }
    </div>
</ng-template>
